<template>
  <div class="head">
    <el-row :gutter="10">
      <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="1">
        <div><img class="logo" src="@/assets/打脸.png" alt="" /></div>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
        ><div>
          <div class="serachnav">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
            </el-input
            ><el-button type="text" class="serachbtn">搜索</el-button>
          </div>
        </div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="3" :xl="11"
        ><div class="grid-content bg-purple"></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="9" :xl="1"
        ><div class="navright">
          <el-link :underline="false" type="primary" class="alinkson"
            >关于打脸</el-link
          >
          <el-link :underline="false" type="primary" class="alinkson"
            >圈币充值</el-link
          >
          <el-link :underline="false" type="primary" class="alinkson"
            >创作者服务</el-link
          >
          <el-link :underline="false" type="primary" class="alinkson"
            >发布flag</el-link
          >

          <div class="avacar">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </div></div
      ></el-col>
    </el-row>
  </div>
</template>
<style>
.head {
  box-shadow: 0 2px 12px 0 rgba(201, 11, 11, 0.1);
  /* position: fixed; */
  /* background-color: blue; */
  box-sizing: border-box;
  height: 63px;
}
.grid-content {
  border-radius: 4px;
  min-height: 60px;
}

.logo {
  /* logo */
  /* s */
  width: 60px;
  height: 60px;
}
.serachnav {
  /* 搜索框框 */
  position: relative;
  margin-top: 3px;
}

.serachbtn {
  /*搜索字体*/
  position: absolute;
  right: 5px;
}
.navright {
  /* 右边导航条 */
  position: relative;
  margin-top: 8px;
}
.alinkson {
  /* 右边导航条每条 */
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
}
.avacar {
  /* 头像 */
  position: absolute;
  top: -10px;
  left: 500px;
}
</style>